<html lang="en-us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
        </script>

        <title>Pickup Map Mobile Check In</title>
        <link rel="stylesheet" href="./styles.css" type="text/css"></link>
        <script type="text/javascript">
            $(document).ready(function(){

                // Hard-coding field id - CHECK IF THIS STILL WORKS!
                field = "1";

                $('#submit').click(function(field){
                    
                    var sportValue = $('#sport').val();
                    var skillValue = $('#skill').val();
					var durationValue = $('#duration').val();
					var checkedValue = $('#checkbox').val();
					var date = new Date();
					var month = parseInt(date.getMonth()) + 1;
					var time = date.getFullYear()+"-"+month.toString() +"-"+date.getDate() + " "+ date.getHours()+":"+date.getMinutes() +":"+date.getSeconds();
					$.post("backend.php", {
						f_id: field,
						e_sport: sportValue, 
						e_timestart: time, 
						e_timestop: durationValue, 
						e_numppl: 1, 
						e_equipment: checkedValue, 
						e_skill: skillValue,
						post_action: "event_create" //passing to php and insert values to database
					}, function(data){
						var json = jQuery.parseJSON(data);
						$("#test").attr("innerHTML",json.output);
						if (json.error != "") alert(json.error);
					});
					
                });
                
                // Find Events at Field:
                var date = new Date();
				var month = parseInt(date.getMonth()) + 1;
				var time = date.getFullYear()+"-"+month.toString() +"-"+date.getDate() + " "+ 
							date.getHours()+":"+date.getMinutes() +":"+date.getSeconds();

				/*--test code--
				var gameList = jQuery.parseJSON('[{"e_id": 2,"e_sport": "Basketball"},{"e_id": 23,"e_sport": "Baseball"}]');
	            	
	                // Create HTML using data returned from database
	                var currentGamesHTML = "<label id=\"title\" class=\"title\">Check into Existing Game</label><ul>"; // Variable to store game listing HTML
	            	for (i = 0; i < gameList.length; i++) {
	            		currentGamesHTML += "<li" + " sport=" + gameList[i].e_sport +
	            		" Event_ID=" + gameList[i].e_id + ">" +
	            		gameList[i].e_sport + "</li>";
	            	}
	            	currentGamesHTML += "</ul>";
	            	$('#CurrentGames').append(currentGamesHTML); // Append HTML to body

				*/			
				
				$.post("backend.php", {
					f_id: field,
					e_sport: "*", 
					e_timestart: time, 
					e_timestop: "*", 
					e_numppl: "*", 
					e_equipment: "*", 
					e_skill: "*",
					post_action: "event_find" //passing to php and insert values to database
				}, function(data){
					// Parse Database JSON file
					var JSONoutput = jQuery.parseJSON(data);
					var gameList = JSONoutput.output;
					
					// Dummy Data
					// var gameList = jQuery.parseJSON('[{"e_id": 2,"e_sport": "Basketball"},{"e_id": 23,"e_sport": "Baseball"}]');
	            	
	                // Create HTML using data returned from database
	                var currentGamesHTML = "<label id=\"title\" class=\"title\">Check into Existing Game</label><ul>"; // Variable to store game listing HTML
	            	for (i = 0; i < gameList.length; i++) {
	            		currentGamesHTML += "<li" + " sport=" + gameList[i].e_sport +
	            		" Event_ID=" + gameList[i].e_id + ">" +
	            		gameList[i].e_sport + "</li>";
	            	}
	            	currentGamesHTML += "</ul>";
	            	$('#CurrentGames').append(currentGamesHTML); // Append HTML to body

	            	// Set onclick function for game listings
	            	$("li").click(function(){
	            		var event_ID = $(this).attr("Event_ID");
	            		
	            		// Add Person
	            		$.post("backend.php", {
							e_id: event_ID,
							e_numppl: "1",
							e_equipment: "0", 
							post_action: "event_checkin" //passing to php and insert values to database
						});
	            		
	            	});
				});

            });
        </script>
    </head>
    <body>
    	<div style="text-align:center;"><img src="images/logoMobile.png"></img></div>
        <!--<label id="title" class="title">
            Check into Existing Game
        </label>-->
		<div id="CurrentGames"></div>
		<label id="title" class="title">
            Create Game
        </label>
        <div id="UIWrapper" style="text-align:center;">
            <div>
                <select id="sport" class="dropList">
                    <option value="" selected="selected">Select Sport:</option>
                    <option value="basketball">Basketball</option>
                    <option value="baseball">Baseball</option>
                    <option value="soccer">Soccer</option>
                    <option value="ultimate">Ultimate Frisbee</option>
                    <option value="rugby">Rugby</option>
                    <option value="kickball">Kickball</option>
                    <option value="dodgeball">Dodgeball</option>
                </select>
            </div>
            <div>
                <select id="skill" class="dropList">
                    <option value="" selected="selected">Select Skill Level:</option>
                    <option value="anything_goes">Anything goes</option>
                    <option value="casual">Casual</option>
                    <option value="competitive">Competitive</option>
                </select>
            </div>
            <div>
                <select id="duration" class="dropList">
                    <option value="" selected="selected">Select Duration:</option>
                    <option value="30">30 min</option>
                    <option value="60">60 min</option>
                    <option value="90">1hr 30 min</option>
                    <option value="120">2hr</option>
                    <option value="150">2hr 30min</option>
                    <option value="180">3hr</option>
                </select>
            </div>
			
            <input type="checkbox" id="checkbox" class="checkbox">
            <label class="checkboxLabel">
                I have equipment
            </label>
            </input>
            <div>
                <button id="submit" class="button">
                    Create Event
                </button>
            </div>
			
        </div>
        
        
		
		
    </body>
</html>
